<template>
    <div class="snow-page">
        <div id="map">
            <div class="map-control">
                <div class="temp">
                    <div class="form">
                        <span style="margin-top: 20px;margin-left: 10px;color: aliceblue;">乡镇：</span>
                        <a-select v-model="townshipId" placeholder="请选择"
                            style="width: 250px;height: 40px;margin-top: 10px;line-height: 40px;" filterable clearable>
                            <a-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
                            </a-option>
                        </a-select>

                        <a-button type="primary" style="margin:10px;color: black;" @click="handleSearch">搜索</a-button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
//====================变量==================
const map = ref(null) as any
const isLayerVisible = ref(true)
const result = ref("")
const point = ref("")
const optionsList = ref([]) as any
const townshipId = ref("")
const markers = ref([])
//==========================方法==============
onMounted(() => {
    initMap()
})

function initMap() {
    BM.Config.HTTP_URL = "http://10.10.1.32:9100";
    BM.accessToken =
        "pk.eyJ1IjoiY3VzXzljZW96bWJ3IiwiYSI6ImRqOTJsbDRyZXVlZWk4dXFiZjN3YnJieWoifQ.Yw7t2EpnBZSj8E1_b13k0w";
    map.value = BM.map("map", "bigemap.c38vsig1", {
        center: [31.56604766845703, 121.67838287353516],
        zoom: 2,
        zoomControl: false,
        attributionControl: false
    });
    // map.value.zoomIn();

    map.value.fitBounds([
        [31.257471084594727, 121.11383819580078],
        [31.87462615966797, 122.242919921875]
    ]);
}

function handleSearch() {

}
</script>

<style lang="scss" scoped>
.home-page {
    padding: $padding;
    background: $color-bg-1;
}

#map {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #00557f;

    .map-control {
        position: absolute;

        // top: 10px;
        // left: 10px;
        z-index: 1000;

        button {
            cursor: pointer;
            // padding: 6px 12px;
            background: white;
            border: 1px solid #cccccc;
        }
    }
}

.temp {
    position: absolute;
    width: 100vw;

    // top: 10px;
    height: fit-content;
    background-color: #335869;

    // margin-left: 40px;
    // min-height: 60px;
    .form {
        display: flex;
    }
}
</style>